<!-- 订单管理 -->
<template>
  <div id="Order">
    <div class="box" v-show="msgOne">
      <!-- 列表 -->
      <div class="searchBox">
        <div>
          <span>订单号:</span>
          <el-input v-model="inputOrderNo" style="width: 150px;height: 30px;" />
        </div>
        <div>
          <span>收货人:</span>
          <el-input v-model="inputConsignee" style="width: 150px;height: 30px;" />
        </div>
        <div>
          <span>手机号:</span>
          <el-input v-model="inputPhone" style="width: 150px;height: 30px;" />
        </div>
        <div>
          <span>订单状态:</span>
          <el-select placeholder="订单状态选择" style="width: 150px" v-model="valueNow" @change="orderNow">
            <el-option label="派送中" value="派送中" />
            <el-option label="已受理" value="已受理" />
          </el-select>
        </div>
        <div>
          <span>下单时间:</span>
          <el-date-picker v-model="valueTime" type="datetimerange" start-placeholder="Start date"
            end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss" @change="changeTime" style="width: 200px;" />
        </div>
        <div>
          <el-button type="primary" style="width: 50px;height: 30px;" @click="handleFind">查询</el-button>
        </div>
      </div>
      <table class="MyTable">
        <thead>
          <tr>
            <th>订单号</th>
            <th>下单时间</th>
            <th>手机号</th>
            <th>收货人</th>
            <th>配送地址</th>
            <th>送达时间</th>
            <th>用户备注</th>
            <th>订单金额</th>
            <th>订单状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in currentOrders" :key="item.id">
            <td>{{ item.orderNo }} </td>
            <td>{{ item.orderTime }}</td>
            <td>{{ item.phone }}</td>
            <td>{{ item.consignee }}</td>
            <td>{{ item.deliverAddress }}</td>
            <td>{{ item.deliveryTime }}</td>
            <td>{{ item.remarks }}</td>
            <td>{{ item.orderAmount }}</td>
            <td>{{ item.orderState }}</td>
            <td>
              <span class="editBtn" @click="handleEdit(item.id)" v-show="msgFour">编辑</span>
              <span class="watchBtn" @click="handlewatch(item.id)">查看</span>
            </td>
          </tr>
        </tbody>
      </table>
      <br>
      <!-- 表格翻页 -->
      <div class="demo-pagination-block">
        <!-- <div class="demonstration">All combined</div> -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10]" :size="size"
          layout="total, sizes, prev, pager, next, jumper" :total="myOrders.length" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
    </div>
    <!-- 编辑界面 -->
    <div class="edit" v-show="msgTwo">
      <div class="edit_title">&emsp;订单编辑</div>
      <div class="edit_body">
        <div>
          <div class="edit_body_left">订单号:</div>
          &emsp;
          <div class="edit_body_right">{{ neworderNo }}</div>
        </div>
        <div>
          <div class="edit_body_left">下单时间:</div>
          &emsp;
          <div class="edit_body_right">{{ neworderTime }}</div>
        </div>
        <div>
          <div class="edit_body_left"><span>*</span>手机号:</div>
          &emsp;
          <div class="edit_body_right"><input type="text" v-model="newphone"></div>
        </div>
        <div>
          <div class="edit_body_left"><span>*</span>收件人:</div>
          &emsp;
          <div class="edit_body_right"><input type="text" v-model="newconsignee"></div>
        </div>
        <div>
          <div class="edit_body_left"><span>*</span>配送地址:</div>
          &emsp;
          <div class="edit_body_right"><input type="text" v-model="newdeliverAddress"></div>
        </div>
        <div>
          <div class="edit_body_left">送达时间:</div>
          &emsp;
          <div class="edit_body_right">{{ newdeliveryTime }}</div>
        </div>
        <div>
          <div class="edit_body_left"><span>*</span>用户备注:</div>
          &emsp;
          <div class="edit_body_right"><input type="text" v-model="newremarks"></div>
        </div>
        <div>
          <div class="edit_body_left">订单金额:</div>
          &emsp;
          <div class="edit_body_right">￥{{ neworderAmount }}</div>
        </div>
        <el-button type="primary" class="sure_edit_btn" @click="handleSureEdit">确认修改</el-button>
      </div>
    </div>
    <!-- 查看订单 -->
    <div class="watch" v-show="msgThree">
      <div class="watch_title">
        <div>订单详情</div>
        <div @click="handleClose">X</div>
      </div>
      <div class="watch_small_box">订单号:{{ neworderNo }}</div>
      <div class="watch_small_box">下单时间:{{ neworderTime }}</div>
      <div class="watch_small_box">手机号:{{ newphone }}</div>
      <div class="watch_small_box">收件人:{{ newconsignee }}</div>
      <div class="watch_small_box">配送地址:{{ newdeliverAddress }}</div>
      <div class="watch_small_box">送达时间:{{ newdeliveryTime }}</div>
      <div class="watch_small_box">用户备注:{{ newremarks }}</div>
      <div class="watch_small_box">订单金额:{{ neworderAmount }}</div>
      <div class="watch_small_box">派送状态:{{ neworderState }}</div>
      <div class="sure_btn"><el-button type="primary" class="primaryBtn" @click="handleClose">确定</el-button></div>
    </div>
    <!-- 蒙版 -->
    <div class="mask" v-show="msgThree"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import type { ComponentSize } from 'element-plus'
import { fetchLoginThree, fetchLoginFour, fetchLoginTwentySix } from '../../api/index';
const currentPage = ref(1)
const pageSize = ref(10)
const size = ref<ComponentSize>('default')

//日期转换
function formatDateTime(dateTimeStr: any) {
  const date = new Date(dateTimeStr);
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0');
  const day = date.getDate().toString().padStart(2, '0');
  const hours = date.getHours().toString().padStart(2, '0');
  const minutes = date.getMinutes().toString().padStart(2, '0');
  const seconds = date.getSeconds().toString().padStart(2, '0');

  //
  const offsetHours = 8; // UTC+8
  const localHours = date.getUTCHours() + offsetHours;
  return `${year}-${month}-${day} ${localHours}:${minutes}:${seconds}`;
}

interface OrderItem {
  id: any;
  orderNo: string;
  orderTime: string;
  phone: string;
  consignee: string;
  deliverAddress: string;
  deliveryTime: string;
  remarks: string;
  orderAmount: string;
  orderState: string;
}
const myOrders = ref<OrderItem[]>([]);



//页面崩溃的原因是因为 await 被错误地放置在了组件的顶层作用域中，而不是在异步函数内部。(已解决)
//获取订单列表数据 + 日期格式化
onMounted(async () => {
  const resThree = await fetchLoginThree({ currentPage: 1, pageSize: 9999 });
  //   console.log(resThree);
  const data = resThree.data.data.map((item: any) => {
    // 假设您需要转换的字段是 orderTime
    if (item.orderTime) {
      item.orderTime = formatDateTime(item.orderTime);
      item.deliveryTime = formatDateTime(item.deliveryTime);
    }
    return item;
  });
  myOrders.value = data;
});

//表格数据数组
// const myOrders = ref([]);

//表格数据绑定翻页
const currentOrders = computed(() => {
  return myOrders.value.slice((currentPage.value - 1) * pageSize.value, currentPage.value * pageSize.value)
})

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  nowPage.value = val;
}

//----------------------------------------------------------

const msgOne = ref(true)
const msgTwo = ref(false)
const msgThree = ref(false)

//编辑的数据input框
const neworderNo = ref('')
const neworderTime = ref('')
const newphone = ref('')
const newconsignee = ref('')
const newdeliverAddress = ref('')
const newdeliveryTime = ref('')
const newremarks = ref('')
const neworderAmount = ref('')
const neworderState = ref('')
const newid = ref('')



//编辑按钮效果
function handleEdit(id: any) {

  msgOne.value = !msgOne.value;
  msgTwo.value = !msgTwo.value;
  //console.log(id);
  const index = myOrders.value.findIndex((item) => item.id === id);
  //console.log(index);
  //console.log(myOrders.value[index]);
  neworderNo.value = myOrders.value[index].orderNo;
  neworderTime.value = myOrders.value[index].orderTime;
  newphone.value = myOrders.value[index].phone;
  newconsignee.value = myOrders.value[index].consignee;
  newdeliverAddress.value = myOrders.value[index].deliverAddress;
  newdeliveryTime.value = myOrders.value[index].deliveryTime;
  newremarks.value = myOrders.value[index].remarks;
  neworderAmount.value = myOrders.value[index].orderAmount;
  neworderState.value = myOrders.value[index].orderState;
  newid.value = myOrders.value[index].id;
}

//修改按钮效果
const handleSureEdit = async () => {

  const userInfo = ref<IUserInfo>({
    id: newid.value,
    orderNo: neworderNo.value,
    orderTime: neworderTime.value,
    phone: newphone.value,
    consignee: newconsignee.value,
    deliverAddress: newdeliverAddress.value,
    deliveryTime: newdeliveryTime.value,
    remarks: newremarks.value,
    orderAmount: neworderAmount.value,
    orderState: neworderState.value,
  })

  const res = await fetchLoginFour(userInfo.value);
  console.log(res);

  //点击后退出
  msgOne.value = !msgOne.value;
  msgTwo.value = !msgTwo.value;
  location.reload();
}

//查看数据
function handlewatch(id: any) {

  msgThree.value = !msgThree.value;
  const index = myOrders.value.findIndex((item) => item.id === id);
  console.log(index);
  neworderNo.value = myOrders.value[index].orderNo;
  neworderTime.value = myOrders.value[index].orderTime;
  newphone.value = myOrders.value[index].phone;
  newconsignee.value = myOrders.value[index].consignee;
  newdeliverAddress.value = myOrders.value[index].deliverAddress;
  newdeliveryTime.value = myOrders.value[index].deliveryTime;
  newremarks.value = myOrders.value[index].remarks;
  neworderAmount.value = myOrders.value[index].orderAmount;
  neworderState.value = myOrders.value[index].orderState;
  newid.value = myOrders.value[index].id;
}

//关闭查看
function handleClose() {
  msgThree.value = !msgThree.value;
}

//查询数据配置
const inputOrderNo = ref('');
const inputConsignee = ref('');
const inputPhone = ref('');
const valueTime = ref('');
const valueNow = ref('');
const startTime = ref('');
const endTime = ref('');
const nowPage = ref(1);

function changeTime(val: any) {
  //console.log(val); 
  //起始时间转换
  const dateObjStart = new Date(val[0]);
  const formattedDateStart = ref(
    `${dateObjStart.getFullYear()}-${String(dateObjStart.getMonth() + 1).padStart(2, '0')}-${String(dateObjStart.getDate()).padStart(2, '0')} ${String(dateObjStart.getHours()).padStart(2, '0')}:${String(dateObjStart.getMinutes()).padStart(2, '0')}:${String(dateObjStart.getSeconds()).padStart(2, '0')}`
  );
  //console.log(formattedDateStart.value);//转换成功
  startTime.value = formattedDateStart.value;

  //截至时间转换
  const dateObjEnd = new Date(val[1]);
  const formattedDateEnd = ref(
    `${dateObjEnd.getFullYear()}-${String(dateObjEnd.getMonth() + 1).padStart(2, '0')}-${String(dateObjEnd.getDate()).padStart(2, '0')} ${String(dateObjEnd.getHours()).padStart(2, '0')}:${String(dateObjEnd.getMinutes()).padStart(2, '0')}:${String(dateObjEnd.getSeconds()).padStart(2, '0')}`
  );
  //console.log(formattedDateEnd.value);//转换成功
  endTime.value = formattedDateEnd.value;
}

function orderNow(val: any) {
  console.log(val);
}

//查询数据
const handleFind = async () => {
  const res = await fetchLoginTwentySix(
    // {currentPage:nowPage.value,pageSize:10,orderNo:inputOrderNo.value,consignee:inputConsignee.value,phone:inputPhone.value,date:JSON.stringify([startTime.value,endTime.value])}
    { currentPage: 1, pageSize: 10, orderNo: inputOrderNo.value, consignee: inputConsignee.value, phone: inputPhone.value, orderState: valueNow.value }
  )
  console.log(res.data);
  if (res.data.data.length > 0) {
    myOrders.value = res.data.data;
  } else {
    alert('没有可查询的订单！');
    // location.reload();
  }
}

//管理员权限配置
const MyUserGroup = ref(sessionStorage.getItem('MyUserGroup'))
const msgFour = ref('');//编辑的开启和关闭状态
//console.log(MyUserGroup.value);

if (MyUserGroup.value === '超级管理员') {
  msgFour.value = true;
} else {
  msgFour.value = false;
}
</script>
<style scoped>
.box {

  margin: 10px;
}

.table-container {
  width: 100%;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  font-size: 0.8vw;
  text-align: center;
}

td {
  width: 5vw;
  height: 2.2vw;
  font-size: 0.8vw;
  text-align: center;
}

thead {
  background-color: #f2f2f2;
}

.edit {
  width: 80vw;
  height: 78vh;
  margin-left: 1vw;
  border: 0.1vw solid #999;
  box-shadow: 2px 2px;

  .edit_title {
    height: 5vh;
    font-size: 0.9vw;
    line-height: 5vh;
    border-bottom: 0.1vw solid #999;
  }

  .edit_body {
    padding: 2vw;
    font-size: 0.9vw;

    div {
      width: 80vw;
      height: 6vh;
      display: flex;

      .edit_body_left {
        width: 5vw;
        height: 6vw;
        text-align: right;
      }

      .edit_body_right {
        width: 70vw;
        height: 6vw;

        >input {
          width: 70vw;
          height: 2.5vh;
          font-size: 0.9vw;
          outline: none;
        }
      }
    }
  }
}

.editBtn {
  margin-left: 0.5vw;
  cursor: pointer;
  color: #2b90f6;
}

.watchBtn {
  margin-left: 0.5vw;
  cursor: pointer;
  color: #2b90f6;
}

.sure_edit_btn {
  width: 5vw;
  height: 2.5vw;
  margin-left: 2vw;
  font-size: 1vw;
}

.watch {
  width: 25vw;
  height: 30vw;
  position: absolute;
  top: 10vw;
  left: 36vw;
  background-color: #fff;
  z-index: 9999;
  padding: 2vw;

  .watch_title {
    width: 25vw;
    height: 3vw;
    font-size: 0.8vw;
    display: flex;
    border-bottom: 0.1vw solid gray;

    div:nth-child(1) {
      width: 14vw;
      height: 3vw;
      text-align: right;
    }

    div:nth-child(2) {
      width: 11vw;
      height: 3vw;
      cursor: pointer;
      text-align: right;
    }
  }

  .watch_small_box {
    width: 25vw;
    height: 2.5vw;
    font-size: 0.8vw;
    line-height: 2.5vw;
    border-bottom: 0.1vw solid #999;
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sure_btn {
  width: 4vw;
  height: 2vw;
  margin: 5vh auto;

  .primaryBtn {
    width: 4vw;
    height: 2vw;
    font-size: 0.9vw;
  }
}

.searchBox {
  display: flex;
  justify-content: space-around;
}

.MyTable {
  margin-top: 1vw;
}
</style>